<template>
	<div>
		<el-container>
			<el-header class="header_style">
				<el-row>
					<el-col :span="6">
						<router-link to="/">
							<img style="margin-top: 15px" src="../assets/img/banner.png" width="30px" />
						</router-link>
					</el-col>
					<el-col :span="10">
						<el-input style="margin-top: 10px" v-model="searchStr" placeholder="Bingo搜索"></el-input>
					</el-col>
					<el-col :span="4">
						<el-button @click="searchVideo()" style="margin-top: 10px">搜索</el-button>
					</el-col>
					<el-col :span="2" v-if="loginUser != null">
						<el-avatar style="margin-top: 10px; float: right; margin-right: 30px" :size="40"
							:src="loginUser.avatarUrl"></el-avatar>
					</el-col>
					<el-col :span="2" v-if="loginUser != null">
						<el-link href="/self" style="font-size: 20px; margin-top: 15px" :underline="false">我的</el-link>
						<el-link @click="logout()" style="font-size: 20px; margin-top: 15px; margin-left: 30px" :underline="false">退出
						</el-link>
					</el-col>

					<el-col :span="4" v-if="loginUser == null">
						<router-link to="/login">
							<el-button type="primary" plain style="float: right; margin-top: 10px; margin-right: 10px">
								登录</el-button>
						</router-link>
					</el-col>
				</el-row>
			</el-header>
			<el-container>
				<el-aside width="13%" style="margin-top: 20px;">
					<el-menu default-active="0" style="width: 13%; height: 100%; position: fixed; top: 100px">
						<el-menu-item index="0" @click="selectSideOps(0)">
							<img src="../assets/img/home.png" style="margin-right: 10px" />
							<span slot="title">家</span>
						</el-menu-item>

						<el-menu-item index="1" @click="selectSideOps(1)">
							<img src="../assets/img/like.png" style="margin-right: 10px" />
							<span slot="title">Like</span>
						</el-menu-item>

						<el-menu-item index="2" @click="selectSideOps(2)">
							<img src="../assets/img/collect.png" style="margin-right: 10px" />
							<span slot="title">收藏</span>
						</el-menu-item>

						<el-menu-item disabled>
							<span slot="title">视频分类</span>
						</el-menu-item>

						<el-menu-item index="4" @click="selectVideoType('动画')">
							<img src="../assets/img/国产动画推荐.png" style="margin-right: 10px" />
							<span slot="title">动画</span>
						</el-menu-item>
						<el-menu-item index="5" @click="selectVideoType('音乐')">
							<img src="../assets/img/音乐.png" style="margin-right: 10px" />
							<span slot="title">音乐</span>
						</el-menu-item>
						<el-menu-item index="6" @click="selectVideoType('游戏')">
							<img src="../assets/img/游戏.png" style="margin-right: 10px" />
							<span slot="title">游戏</span>
						</el-menu-item>
						<el-menu-item index="7" @click="selectVideoType('科技')">
							<img src="../assets/img/科技.png" style="margin-right: 10px" />
							<span slot="title">科技</span>
						</el-menu-item>
						<el-menu-item index="8" @click="selectVideoType('鬼畜')">
							<img src="../assets/img/鬼畜.png" style="margin-right: 10px" />
							<span slot="title">鬼畜</span>
						</el-menu-item>
						<el-menu-item index="9" @click="selectVideoType('搞笑')">
							<img src="../assets/img/搞笑.png" style="margin-right: 10px" />
							<span slot="title">搞笑</span>
						</el-menu-item>
						<el-menu-item index="10" @click="selectVideoType('知识')">
							<img src="../assets/img/知识.png" style="margin-right: 10px" />
							<span slot="title">知识</span>
						</el-menu-item>

					</el-menu>
				</el-aside>
				<el-main width="88%" style="margin-top: 75px">
					<el-carousel v-show="true" :interval="5000" arrow="always" style="margin-bottom: 20px">
						<el-carousel-item v-for="item in imgsrc" :key="item">
							<img width="100%" :src="item" />
						</el-carousel-item>
					</el-carousel>

					<el-empty v-if="videos.length == 0" description="没有视频哦"></el-empty>
					<el-row :gutter="20">
						<div style="margin: 10px">
							<el-col v-for="video in videos" :key="video.id" :span="6" style="height: 300px">
								<video-list-item :title="video.title" :videoId="video.id"
									:description="video.description" :duration="video.duration"
									:publisherAvatarUrl="video.userAvatarUrl" :videoCoverUrl="video.coverImageUrl"
									:publisherId="video.userId">
								</video-list-item>
							</el-col>
						</div>
					</el-row>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import VideoListItem from '../components/VideoListItem.vue'

	export default {
		components: {
			VideoListItem
		},
		name: 'Home',
		data() {
			return {
				loginUser: null,
				searchStr: "",
				imgsrc: [require('../assets/img/background/1.jpg'),
					require('../assets/img/background/2.jpg'),
					require('../assets/img/background/3.jpg'),
					require('../assets/img/background/4.jpg'),
					require('../assets/img/background/5.jpg'),
					require('../assets/img/background/6.jpg')
				],
				videos: [],
				isCollapse: false,
				pageNum: 0,
			}
		},
		methods: {
			logout() {
				this.$axios.post('/user/logout', {
					headers: {
						'bingo_cookie': this.loginUser.bingo_cookie
					}
				}).then((result) => {
					localStorage.removeItem('bingo_username')
					localStorage.removeItem('bingo_userId')
					localStorage.removeItem('bingo_avatarUrl')
					localStorage.removeItem('bingo_description')
					localStorage.removeItem('bingo_cookie')
					location.reload()
				}).catch((err) => {
					console.log(err)
				})
			},
			loadVideos() {
				var self = this
				this.$axios({
					url: '/video',
					method: 'post',
					data: {
						'page': this.pageNum++,
						'countPerPage': 20,
					}
				}).then((result) => {
					for (var i = 0; i < result.data.data.length; i++) {
						self.videos.push(result.data.data[i])
					}
					if (result.data.data.length == 0) {
						self.pageNum--;
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			selectVideoType(type) {
				console.log(type)
				var self = this
				this.$axios.get('/video/' + type).then((result) => {
					self.videos = result.data.data
				}).catch((err) => {
					console.log(err)
				})
			},
			selectSideOps(index) {
				switch (index) {
					case 0:
						location.reload()
						break;
					case 1:
						var bingo_cookie = localStorage.getItem('bingo_cookie')
						if (bingo_cookie == null) {
							this.$router.push('/login')
						}
						var self = this
						this.$axios.get('/user/likedVideos', {
							headers: {
								'bingo_cookie': bingo_cookie
							}
						}).then((result) => {
							self.videos = result.data.data
						}).catch((err) => {
							console.log(err)
						})
						break;
					case 2:
						var bingo_cookie = localStorage.getItem('bingo_cookie')
						if (bingo_cookie == null) {
							this.$router.push('/login')
						}
						var self = this
						this.$axios.get('/user/collectedVideos', {
							headers: {
								'bingo_cookie': bingo_cookie
							}
						}).then((result) => {
							self.videos = result.data.data
						}).catch((err) => {
							console.log(err)
						})
						break;
				}
			},
			searchVideo() {
				if (this.searchStr == "") {
					this.$message({
						showClose: true,
						message: "搜索关键字不能为空",
						type: 'warning'
					})
					return
				}
				var self = this
				this.$axios.get('/video/search/' + this.searchStr).then((result) => {
					self.videos = result.data.data
				}).catch((err) => {
					console.log(err)
				})
			}
		},
		mounted() {
			var self = this;
			window.addEventListener("scroll", function () {
				var scrollTop = this.document.documentElement.scrollTop;
				var scrollHeight = this.document.documentElement.scrollHeight;
				var windowHeight = this.window.innerHeight;
				if (windowHeight + scrollTop == scrollHeight) {
					self.loadVideos();
				}
			})

			if (localStorage.getItem('bingo_cookie') != null) {
				this.loginUser = {
					id: localStorage.getItem('bingo_userId'),
					username: localStorage.getItem('bingo_username'),
					avatarUrl: localStorage.getItem('bingo_avatarUrl'),
					description: localStorage.getItem('bingo_description'),
					bingo_cookie: localStorage.getItem('bingo_cookie')
				}
			}
		},
		destroyed() {
			window.addEventListener("scroll", function () {})
		},
		created() {
			var bingo_cookie = localStorage.getItem('bingo_cookie')
			if (bingo_cookie != null) {
				this.$axios({
					url: '/user/checklogin',
					method: 'post',
					headers: {
						'bingo_cookie': bingo_cookie
					}
				}).then((result) => {
					if (result.data.data == 0) {
						localStorage.removeItem('bingo_username')
						localStorage.removeItem('bingo_userId')
						localStorage.removeItem('bingo_avatarUrl')
						localStorage.removeItem('bingo_description')
						localStorage.removeItem('bingo_cookie')
					}
				}).catch((err) => {
					localStorage.removeItem('bingo_username')
					localStorage.removeItem('bingo_userId')
					localStorage.removeItem('bingo_avatarUrl')
					localStorage.removeItem('bingo_description')
					localStorage.removeItem('bingo_cookie')
					console.log(err)
				});
			}

			this.loadVideos()
		}
	}
</script>

<style scoped>
	.header_style {
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		border-radius: 30px;
		width: 99%;
		position: fixed;
		background: rgba(255, 255, 255, .5);
		z-index: 10;
		margin-left: auto;
		margin-right: auto;
		backdrop-filter: blur(6px);
	}

	.side_box {
		font-size: 22px;
	}
</style>